<template>
    <div class="search-box">
        <i class="icon-search"></i>
        <input class="box" type="text" :placeholder="placeholder" v-model="query" >
        <i @click="clearn" class="icon-dismiss"></i>
    </div>
</template>

<script>
import {debounce} from '../../common/js/index'
export default {
  data() {
    return {
      query: ''
    }
  },
  props: {
    placeholder: {
      type: String,
      default: '搜索歌曲，歌单，专辑'
    }
  },
  methods: {
    clearn() {
      this.query = ''
    },
    setquery(query) {
      this.query = query
    }
  },
  created() {
    this.$watch('query', debounce((newQuery) => {
      this.$emit('query', newQuery)
    }, 400))
  }
}
</script>

<style lang="scss" scoped>
.search-box{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 6px;
    height: 40px;
    border-radius: 6px;
    background-color: #333;
    .icon-search{

        font-size: 24px;
        color: #222;
    }
    .box{
        flex: 1;
        line-height: 22px;
        font-size: 14px;
        color: #fff;
        background-color: #333;
        &::placeholder{
            color: rgba(255,255,255,0.6);
        }
    }
    .icon-dismiss{
        font-size: 16px;
        color: #222;
    }

}
</style>
